<template>
    <div>


        <div class="slba-container">
            <div class="slba-header">

                <div class="rili">
                    <div>

                        <span class="rili-start" @click="showStart = true">
                            {{ getDate(startDate) }}

                        </span>
                        至
                        <span class="rili-end" @click="showEnd = true">
                            {{ getDate(endDate) }}
                        </span>
                    </div>

                    <span class="rili-img">
                        <van-icon :name="riliIcon" />
                    </span>
                </div>
                <div v-if="false" class="clba-hj">
                    <div class="clba-hj-title">
                        合计信息
                    </div>
                    <div class="clba-hj-content">
                        <div class="clba-hj-content-item">
                            <div class="clba-hj-content-item-title">总数</div>
                            <div class="clba-hj-content-item-count">{{ HjData.CountAll || 0 }}
                            </div>
                        </div>
                        <div class="clba-hj-content-item">
                            <div class="clba-hj-content-item-title">分支机构</div>
                            <div class="clba-hj-content-item-count">{{ HjData.Countf || 0 }}
                            </div>
                        </div>
                        <div class="clba-hj-content-item">
                            <div class="clba-hj-content-item-title">委托生产</div>
                            <div class="clba-hj-content-item-count">{{ HjData.Counts || 0 }}
                            </div>
                        </div>
                        <div class="clba-hj-content-item">
                            <div class="clba-hj-content-item-title">委托代销</div>
                            <div class="clba-hj-content-item-count">{{ HjData.Countd || 0 }}
                            </div>
                        </div>
                        <div class="clba-hj-content-item">
                            <div class="clba-hj-content-item-title">经营不分装</div>
                            <div class="clba-hj-content-item-count">{{ HjData.Countb || 0 }}
                            </div>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 12px;">
                    <div class="list-container-title">
                        <div class="column column-2 text-align-left">
                            <span class="font-size-10">
                                区域
                            </span>
                        </div>
                        <div class="column column-2 text-align-right">
                            <span class="font-size-10">
                                合计
                            </span>
                        </div>
                        <div class="column column-2 text-align-right">
                            <span class="font-size-10">
                                分支机构
                            </span>
                        </div>
                        <div class="column column-2 text-align-right">
                            <span class="font-size-10">
                                委托生产
                            </span>
                        </div>
                        <div class="column column-2 text-align-right">
                            <span class="font-size-10">
                                委托代销
                            </span>
                        </div>
                        <div class="column column-2 text-align-right">
                            <span class="font-size-10">
                                经营不分装
                            </span>
                        </div>
                    </div>
                </div>

            </div>

            <div class="slba-content">
                <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <van-list :loading="loading" :finished="finished" finished-text="已经到底了" class="c-dab-list">

                        <div v-for="(item, index) in tableData" :key="index" class="list-container  text-align-right">
                            <div class="column column-2 text-align-left" @click="onQuYu(item, index)">
                                {{ item.Caption }}
                            </div>
                            <div class="column column-2 " @click="onBadList(item, '0', '合计')">
                                {{ item.CountAll }}
                            </div>
                            <div class="column column-2" @click="onBadList(item, BeiAnTypeEnum.FZJG.type,  BeiAnTypeEnum.FZJG.text)">
                                {{ item.Countf }}</div>
                            <div class="column column-2" @click="onBadList(item, BeiAnTypeEnum.WTSC.type,  BeiAnTypeEnum.WTSC.text)">
                                {{ item.Counts }}</div>
                            <div class="column column-2" @click="onBadList(item, BeiAnTypeEnum.WTDX.type,  BeiAnTypeEnum.WTDX.text)">
                                {{ item.Countd }}</div>
                            <div class="column column-2 " @click="onBadList(item,BeiAnTypeEnum.JYBFZ.type,  BeiAnTypeEnum.JYBFZ.text)">
                                {{ item.Countb }}</div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>

        <van-calendar v-model:show="showStart" :default-date="startDate" switch-mode="year-month"
            @confirm="onStartConfirm" />

        <van-calendar v-model:show="showEnd" :default-date="endDate" switch-mode="year-month" @confirm="onEndConfirm" />
    </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick, onBeforeUnmount, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import uiUtil from "@/util/UiUtil.js";
import riliIcon from "@/assets/img/rili.png";
import { getBeiAnType, BeiAnTypeEnum } from '@/bean/BeiAnType';
const tableData = ref([]);
const router = useRouter();
const route = useRoute();
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const showStart = ref(false);
const showEnd = ref(false);
const startDate = ref({});
const endDate = ref({});
const type = ref({})
endDate.value = new Date();
const currentDate = new Date();
currentDate.setMonth(currentDate.getMonth() - 3);
startDate.value = currentDate
let user = JSON.parse(localStorage.getItem(uiUtil.urlPath.keys.user))
function getDate(date) {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从 0 开始
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
}
function onEndConfirm(date) {
    showEnd.value = false
    endDate.value = date
    props.dataValue.EndDate = getDate(date)
    onRefresh()
}
function onStartConfirm(date) {
    showStart.value = false
    startDate.value = date
    props.dataValue.StartDate = getDate(date)
    onRefresh()
}
const HjData = ref({});
const props = defineProps({
    dataValue: {
        type: Object,
        default: {}
    },
});

watch(() => props.dataValue, (newShow) => {
    init();
});
onMounted(() => {
    init();
})
const init = () => {
    // console.log(props.dataValue);

    if (props.dataValue.StartDate) {
        // console.log('dataValue.StartDate', props.dataValue.StartDate);
        startDate.value = new Date(props.dataValue.StartDate)
    }
    if (props.dataValue.EndDate) {
        // console.log('dataValue.EndDate', props.dataValue.EndDate);
        endDate.value = new Date(props.dataValue.EndDate)
    }
    getData()
}

const onRefresh = () => {
    getData()
}
const getData = async () => {
    getDataList()
};
const getDataList = async () => {

    const params = {
        RegionID: props.dataValue.RegionID || user.RegManageRegionID,
        StartDate: getDate(startDate.value),
        EndDate: getDate(endDate.value),
    }
    uiUtil.http().getObj({
        url: uiUtil.urlPath.getAppFilingCount,
        data: params,
        start: () => {
            uiUtil.toastLoading()
            if (refreshing.value) {
                refreshing.value = false;
            }
        },
        succeed: (res) => {
            // loading.value = false;
            // debugger
            // console.log('1ucceed=', res)
            if (!res || !res.code || 200 != res.code) {
                uiUtil.toastFail(res.msg)
                return
            }
            if (!res.data) {
                // 如果返回数据为空，表示已加载完成
                finished.value = true;
                uiUtil.toastClose()
                return;
            }
            if (res.data.length > 0) {
                HjData.value = res.data[0]
                tableData.value = res.data
            } else {
                HjData.value = {}
                tableData.value = []
            }
            uiUtil.toastClose()

        },
        failed: (res) => {
            // debugger
            console.log('failed=', res)
            // showFailToast('添加失败')
            uiUtil.toastFail('添加失败')
        },
        finish: () => {
            uiUtil.toastClose()
            loading.value = false;
        }
    })
};

const onQuYu = (item) => {
    if (item.RegionID && item.RegionID.endsWith("00")) {
        router.push({
            path: uiUtil.routerPath.QuYuBeiAndanPage, query: {
                StartDate: getDate(startDate.value), EndDate: getDate(endDate.value), ...item
            }
        })
    }
}

const onBadList = (item, type, title) => {
    if(item.Caption == '合计'){
        return
    }
    router.push({
        path: uiUtil.routerPath.QuYuBeiAndanListPage, query: {
            StartDate: getDate(startDate.value),
            EndDate: getDate(endDate.value),
            type: type,
            title: title,
            ...item
        }
    })
}

onBeforeUnmount(() => {
    // console.log('onUnmounted', route);
    if (route.path == uiUtil.routerPath.main) {
        props.dataValue.StartDate = null
        props.dataValue.EndDate = null
    }
})
</script>

<style scoped>
.slba-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.slba-header,
.slba-footer {
    flex: 0 0 auto;
    text-align: center;
    padding: 0;
    overflow: auto;
    margin: 0 12px;
}

.slba-content {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0 12px;
}

.clba-hj {
    margin: 12px 0 0 0;
    background-color: white;
    border-radius: 4px;
    padding: 12px 0;
}

.clba-hj-title {
    background: linear-gradient(to right, rgba(2, 194, 137, 0.33), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));

    width: 93px;
    align-items: center;
    margin: 0;
    padding: auto;
    padding: 6px 12px;
    text-align: left;
    color: #222;
    font-size: 13px;
    font-weight: 500;
}

.clba-hj-content {
    /* 使用弹性盒布局 */
    display: flex;
    /* 子元素间距均匀分布 */
    justify-content: space-around;
    margin-top: 12px;
}

.clba-hj-content-item {
    /* 子元素宽度 */
    width: 100px;
    /* 文字居中 */
    text-align: center;

}

.clba-hj-content-item-title {
    font-size: 13px;
    font-weight: 400;
    color: rgb(136, 136, 136);
}

.clba-hj-content-item-count {
    margin-top: 6px;
    font-size: 16px;
    font-weight: 500;
    color: rgb(34, 34, 34);
}

.c-dab-list {
    padding-bottom: 200px;
}

.list-container-title {
    display: flex;
    background-color: #F9F9F9;
    text-align: center;
    align-items: center;
    color: #888;
    min-height: 50px;
    font-size: 10px;
    padding: 0 12px;
}

.font-size-10 {
    font-size: 10px;
}

.list-container {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #ededed;
    padding: 0 12px;
    align-items: center;
    min-height: 50px;
}

.column {
    padding: 0 2px;
    word-break: break-all;
    word-wrap: break-word;
}

.column-1 {
    width: 50px;
}

.text-align-center {
    text-align: center
}

.column-5 {
    width: 50px;
}

.column-2,
.column-3,
.column-4 {
    flex: 1;
}

.text-align-left {
    text-align: left
}

.text-align-right {
    text-align: right
}

.rili {
    margin-top: 12px;
    background-color: #fff;
    height: 35px;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 左右内容间的空间自动分配 */
    color: #888;
    font-size: 13px;
}

.rili-start {
    margin: 0 24px 0 20px;
    font-size: 13px;
}

.rili-end {
    margin: 0 20px 0 24px;
    font-size: 13px;
}

.rili-img {
    margin: 0 20px 0 24px;
    font-size: 13px;
    align-self: right;
    align-items: end;

}
</style>